<template>
  <div class="body">
    <!-- 头部 -->
    <van-nav-bar>
      <template #right>
        <i class="iconfont icon-zhuanfa"></i>
      </template>
      <template #title>
        <div class="fontSize">{{ songParticulars.name }}</div>
        <div class="fontName">{{ ar.name }}</div>
      </template>
      <template #left>
        <van-icon @click="back" name="arrow-left" size="20" />
      </template>
    </van-nav-bar>
    <!-- 中部 -->
    <!-- 播放器 -->
    <div @click="ddd" v-show="isShow">
      <div>
        <canvas
          id="canvas"
          width="115"
          height="120"
          style="display:none"
        ></canvas>
        <img
          src="~@/assets/drawable-nodpi/ic_needle.png"
          alt=""
          class="image"
          :class="{ origin: switchover }"
        />
        <img
          src="~@/assets/drawable-nodpi/ic_disc.png"
          alt=""
          class="yuanquan"
        />
        <img
          :src="al.picUrl"
          alt=""
          class="singerImg"
          :class="{ animation: switchover }"
        />
      </div>
      <div class="rowcol">
        <van-row type="flex" justify="space-between">
          <van-col span="6">
            <i class="iconfont icon-aixin"></i>
          </van-col>
          <van-col span="6">
            <i class="iconfont icon-download"></i>
          </van-col>
          <van-col span="6">
            <i class="iconfont icon-pinglun"></i>
          </van-col>
          <van-col span="6">
            <i class="iconfont icon-gengduo"></i>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 歌词 -->
    <the-lyrics
      :currentTime="currentTime"
      @ondclick="ddd"
      v-show="playShow"
      :switchover="switchover"
      ref="reference"
    />
    <!-- 底部 -->
    <!-- 播放进度条 -->
    <song-progress-bar @animation="animation" @play="switchover = false" />
  </div>
</template>

<script>
import songProgressBar from './components/songProgressBar.vue'
import { getSongParticulars } from '@/api/play'
import TheLyrics from './components/TheLyrics.vue'
export default {
  components: { songProgressBar, TheLyrics },
  data () {
    return {
      id: this.$route.params.id,
      songParticulars: [],
      switchover: true, // 控制播放
      al: {},
      ar: {},
      isShow: true, // 控制播放的显示
      playShow: false, // 控制歌词的显示
      currentTime: null
    }
  },
  created () {},
  mounted () {
    this.getSongParticulars()
  },
  methods: {
    async getSongParticulars () {
      try {
        // console.log(this.id)
        const { songs } = await getSongParticulars({ ids: this.id })
        this.songParticulars = songs[0]
        const { al } = songs[0]
        const { ar } = songs[0]
        this.al = al
        const img = new Image()
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        img.src = al.picUrl
        img.crossOrigin = 'anonymous'
        img.onload = function () {
          ctx.drawImage(img, 0, 0)
          const imgData = ctx.getImageData(0, 0, img.width, img.height).data
          if (
            imgData[0] + imgData[1] + imgData[2] > 180 &&
            imgData[0] + imgData[1] + imgData[2] < 720
          ) {
            document.querySelector(
              '.body'
            ).style.background = `rgba(${imgData[0]},${imgData[1]},${imgData[2]},${imgData[3]})`
          } else {
            document.querySelector('.body').style.background = '#aba49a'
          }
        }
        this.ar = ar[0]
      } catch (error) {
        console.log(error)
      }
    },
    back () {
      this.$router.back()
    },
    animation (event) {
      this.switchover = event
    },
    //  滚回到开头，用于播放结束时
    theLyrics () {
      return this.$refs.reference.goback()
    },
    BigInt (currentTime) {
      return this.$refs.reference.BigInt(currentTime)
    },
    // 播放器跟歌词的显示切换
    ddd () {
      this.isShow = !this.isShow
      this.playShow = !this.playShow
    }
    // getcurrentTime (event) {
    //   this.currentTime = event
    // }
  }
}
</script>

<style scoped lang="less">
/deep/.van-nav-bar {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.fontName {
  font-size: 24px;
  color: #fff;
}
.fontSize {
  font-size: 30px;
  color: #fff;
}
.body {
  position: relative;
  height: 100vh;
  background: url('~@/assets/drawable-xxhdpi/ic_blackground.png');
}
.image {
  position: absolute;
  top: 80px;
  right: 130px;
  width: 300px;
  height: 430px;
  transform-origin: 50px 50px;
  transition: all 0.6s;
  z-index: 1111;
}
.yuanquan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2px);
  border-radius: 50%;
  z-index: 0;
}
.singerImg {
  width: 350px;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  // transform: translate(-50%, -50%);
  margin-left: -175px;
  margin-top: -175px;
  border-radius: 50%;
}
.iconfont {
  font-size: 50px;
  color: #fff;
}
.rowcol {
  // position: absolute;
  bottom: 300px;
}
.van-col {
  text-align: center;
  margin-top: 70vh;
}
.van-icon-arrow-left {
  color: #fff;
}
.animation {
  animation: example 10s linear infinite backwards;
}
@keyframes example {
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.origin {
  transform: rotate(10deg);
  z-index: 11111;
}
</style>
